<template>
  <div>
    <VolBox :model.sync="model1" title="配置" :width="800" :height="300">
      <h2>富龙冬令营营员入营协议书</h2>
      <VolForm ref="formRules1" :label-width="150" :formFields="formFields1"
        :formRules="formRules1">
      </VolForm>
      <div slot="footer">
        <Button type="success" @click="submit1">确定</Button>
        <Button type="default" @click="model1 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model2" title="团队管理" :width="800" :height="500">
      <Button type="success" class="mabot" @click="addTea">添加团组</Button>
      <el-table :data="tableData" border>
        <el-table-column label="团队">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" size="small"></el-input>
            <a @click="addGroup(scope.row)">添加小组</a> |
            <a @click="delTeam(scope.row)">删除</a>
          </template>
        </el-table-column>
        <el-table-column label="小组">
          <template slot-scope="scope">
            <div v-for="(i,ii) in scope.row.group" :key="ii" class="group">
              <el-input v-model="i.name" size="small"></el-input>
              <a @click="delGroup(scope.row.group,i)">删除</a>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer">
        <Button type="success" @click="submit2">确定</Button>
        <Button type="default" @click="model2 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model3" title="营员管理" :width="800" :height="500">
      <el-tabs v-model="activeName" @tab-click="getTeam">
        <el-tab-pane v-for="(i,ii) in teamList" :key="ii" :label="i.name" :name="i.id">
          <div class="groupDiv">
            <div class="group-item" v-for="(j,jj) in i.group" :key='jj'
              :class="jj == groupIndex ? 'action' : '' " @click="getGroup(j, jj)">{{ j.name }}</div>
          </div>

          <div class="student-item" v-for="(k,kk) in NewStuList" :key="kk"
            :class="{'action': butIndex.indexOf(k.id) > -1}" @click="steStu(k, kk)">
            <div>{{k.name}}</div>
            <div class="group-tip">{{k.teamGroup}}</div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div>
        分配到
        <el-select v-model="teamValue" @change="upTeam">
          <el-option v-for="item in teamListSel" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="groupValue">
          <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <Button type="success" @click="submit3">确定分配</Button>
      </div>
      <div slot="footer">
        <Button type="default" @click="model3 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model4" title="营地员工" :width="900" :height="500">
      <VolForm ref="formRules4" :label-width="80" :formFields="formFields4" :formRules="formRules4">
      </VolForm>
      <el-form ref="model4form" :model="model4form" label-width="80px" :inline="true">
        <div v-for="(i,ii) in formList" :key="ii" class="formList">
          <el-form-item label="团队老师：" class="formList_item">
            <el-tooltip v-if="i.name.length > 9" class="item" effect="light" :content="i.name"
              placement="top-start">
              <span class="labelTitle">{{ i.name }}</span>
            </el-tooltip>
            <span v-else class="labelTitle">{{ i.name }}</span>
            <el-select v-model="i.teamTeacher" multiple>
              <el-option v-for="(k,kk) in teamTeacher" :key="kk" :label="k.value"
                :value="k.key"></el-option>
            </el-select>
          </el-form-item>
          <div class="formList_item">
            <el-form-item v-for="(j,jj) in i.group" :key="jj" label="小组老师：">
              <el-tooltip v-if="i.name.length + j.name.length > 8" class="item" effect="light"
                :content="i.name + '-' + j.name" placement="top-start">
                <span class="labelTitle">{{ i.name }} - {{ j.name }}</span>
              </el-tooltip>
              <span v-else class="labelTitle">{{ i.name }} - {{ j.name }}</span>
              <el-select v-model="j.groupTeacher" multiple>
                <el-option v-for="(k,kk) in groupTeacher" :key="kk" :label="k.value"
                  :value="k.key"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <Button type="success" @click="submit4">确定</Button>
        <Button type="default" @click="model4 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model5" title="营员合并" :width="900" :height="500">
      <el-select v-model="serValue">
        <el-option v-for="(k,kk) in serList" :key="kk" :label="k.value" :value="k.key"></el-option>
      </el-select>
      <Button type="success" @click="search5">搜索</Button>
      <VolTable class="VolTable" ref="editTable5" :columns="columns5" :max-height="270"
        :tableData="tableData5"></VolTable>
      <div slot="footer">
        <Button type="success" @click="submit5">确定</Button>
        <Button type="default" @click="model5 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model6" title="手动发放" :width="600" :height="300">
      <VolForm ref="formRules6" :label-width="80" :formFields="formFields6" :formRules="formRules6">
      </VolForm>
      <div slot="footer">
        <Button type="success" @click="submit6">确定</Button>
        <Button type="default" @click="model6 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model7" title="获得人员" :width="800" :height="300">
      <VolTable ref="editTable7" :columns="columns7" :max-height="270" :ck="false"
        :tableData="tableData7">
      </VolTable>
      <div slot="footer">
        <Button type="default" @click="model7 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model8" title="打标签" :width="500" :height="200">
      <VolForm ref="formRules8" :label-width="80" :formFields="formFields8" :formRules="formRules8">
      </VolForm>
      <div slot="footer">
        <Button type="success" @click="submit8">确定</Button>
        <Button type="default" @click="model8 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model9" title="管理" :width="800" :height="400">
      <VolTable ref="editTable9" :columns="columns9" :max-height="300" :ck="false"
        :tableData="tableData9">
      </VolTable>
      <div slot="footer">
        <Button type="default" @click="model9 = false">关闭</Button>
      </div>
    </VolBox>
    <VolBox :model.sync="model10" title="查看报告" :height="520" :width="520">
      <div id="ckbgCon" ref="ckbgCon" class="container"
        :style="{backgroundImage:'url('+backgroundpic+')'}">
        <div class="flowNode" v-for="(i,ii) in draggableData.nodeList" :key="ii"
          :style="{'top': i.top,'left': i.left}">
          {{i.name}}
        </div>
      </div>
      <div slot="footer">
        <Button type="success" @click="submit10('#ckbgCon',picName)">下载</Button>
        <Button type="default" @click="model10 = false">关闭</Button>
      </div>
    </VolBox>
    <VolBox :model.sync="model11" title="查看详情" :height="520" :width="520">
      <div>
        <div>{{ modelDetail11.actionContent}}</div>
        <div v-if="modelDetail11.actionimgl != ''">
          <div class="actionimg" v-for="(i,ii) in modelDetail11.actionimgl" :key="ii">
            <img :src="SRCL + i" @click="previewImg(SRCL + i)">
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button type="default" @click="model11 = false">关闭</Button>
      </div>
    </VolBox>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import VolTable from "@/components/basic/VolTable.vue";
// import "@/assets/script/jsplumb.js";
import html2canvas from "html2canvas";
export default {
  name: "Mall_campsitemBox",
  components: {
    VolBox,
    VolForm,
    VolTable,
  },
  data() {
    return {
      model1: false,
      formFields1: {
        confirmationtime: "",
        deadlinetime: "",
        supportsignatures: "",
        confirmationtimeday: 1,
        deadlinetimehour: 1,
        supportsignaturesis: "",
        campsite_id_fk: "",
      },
      formRules1: [
        [
          {
            title: "提醒确认时间",
            field: "confirmationtime",
            type: "radio",
            data: [
              {
                value: "跟随全局配置",
                key: 0,
              },
              {
                value: "自定义配置",
                key: 1,
              },
            ],
          },
          {
            title: "",
            field: "confirmationtimeday",
            type: "textSpan",
            cont: ["开营前", "天提醒填写"],
            hidden: true,
          },
        ],
        [
          {
            title: "确认截止时间",
            field: "deadlinetime",
            type: "radio",
            data: [
              {
                value: "跟随全局配置",
                key: 0,
              },
              {
                value: "自定义配置",
                key: 1,
              },
            ],
          },
          {
            title: "",
            field: "deadlinetimehour",
            type: "textSpan",
            cont: ["开营前", "小时"],
            hidden: true,
          },
        ],
        [
          {
            title: "是否支持电子签章",
            field: "supportsignatures",
            type: "radio",
            data: [
              {
                value: "跟随全局配置",
                key: 0,
              },
              {
                value: "自定义配置",
                key: 1,
              },
            ],
          },
          {
            title: "",
            field: "supportsignaturesis",
            type: "radio",
            data: [
              {
                value: "关",
                key: 0,
              },
              {
                value: "开",
                key: 1,
              },
            ],
            hidden: true,
          },
        ],
      ],
      model2: false,
      tableData: [
        {
          id: 1,
          name: "",
          group: [
            {
              id: 1,
              name: "",
            },
          ],
        },
      ],
      phase_id_fk: "",
      model3: false,
      teamList: [],
      teamListSel: [],
      groupList: [],
      activeName: "",
      teamValue: "",
      groupValue: "",
      groupIndex: "",
      stuList: [],
      NewStuList: [],
      butIndex: [],
      NewStuList2: [],
      model4: false,
      formFields4: {
        battalioncommander: "",
        deputyBattalionCommander: "",
        teamTeacher: "",
        groupTeacher: "",
      },
      formRules4: [
        [
          {
            title: "营长",
            field: "battalioncommander",
            type: "selectList",
            dataKey: "",
            data: [],
          },
          {
            title: "副营长",
            field: "deputyBattalionCommander",
            type: "selectList",
            dataKey: "",
            data: [],
          },
        ],
      ],
      columns: [],
      formList: [],
      model4form: {},
      teamTeacher: [],
      groupTeacher: [],
      model5: false,
      columns5: [
        {
          field: "name",
          title: "姓名",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "gender",
          title: "性别",
          type: "int",
          bind: {
            key: "",
            data: [
              { key: "1", value: "男" },
              { key: "2", value: "女" },
              { key: "0", value: "未知" },
            ],
          },
          width: 90,
          align: "left",
        },
        {
          field: "parentsPhone",
          title: "营员电话",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "idCard",
          title: "证件号",
          type: "string",
          width: 220,
          align: "left",
        },
        {
          field: "isUsable",
          title: "状态",
          type: "int",
          bind: {
            key: "",
            data: [
              { key: "1", value: "可用" },
              { key: "0", value: "不可用" },
            ],
          },
          width: 60,
          align: "left",
        },
      ],
      tableData5: [],
      serList: [
        {
          value: "仅相同营员姓名匹配",
          key: "0",
        },
        {
          value: "仅相同营员电话匹配",
          key: "1",
        },
      ],
      serValue: "",
      V_CampsitePeopleMerge: {},
      model6: false,
      modelDetail6: "",
      formFields6: {
        planting: "",
        operationPeriod: "",
        selcamper: "",
      },
      formRules6: [
        [
          {
            title: "选择营种",
            field: "planting",
            type: "select",
            dataKey: "",
            data: [],
          },
        ],
        [
          {
            title: "选择营期",
            field: "operationPeriod",
            type: "select",
            dataKey: "",
            data: [],
          },
        ],
        [
          {
            title: "选择营员",
            field: "selcamper",
            type: "selectList",
            dataKey: "",
            data: [],
          },
        ],
      ],
      model7: false,
      modelDetail7: "",
      columns7: [
        {
          field: "name",
          title: "营员姓名",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "parentsPhone",
          title: "所属会员",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "parentsPhone",
          title: "会员电话",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "phase_name",
          title: "营种",
          type: "string",
          width: 90,
          align: "left",
        },
        // {
        //   field: "name",
        //   title: "获得时间",
        //   type: "string",
        //   width: 90,
        //   align: "left",
        // },
        // {
        //   field: "",
        //   title: "操作",
        //   type: "string",
        //   width: 90,
        //   align: "left",
        //   render: (h, { row }) => {
        //     return h(
        //       "a",
        //       {
        //         on: {
        //           click: (e) => {
        //             console.log(1);
        //           },
        //         },
        //       },
        //       "撤回"
        //     );
        //   },
        // },
      ],
      tableData7: [],
      model8: false,
      formFields8: {
        yylabel: "",
      },
      formRules8: [
        [
          {
            title: "标签",
            field: "yylabel",
            type: "selectList",
            dataKey: "CampLabelType",
            data: [],
          },
        ],
      ],
      modelDetail8: "",
      model9: false,
      columns9: [
        {
          field: "name",
          title: "营员姓名",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "parentsPhone",
          title: "所属会员",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "parentsPhone",
          title: "会员电话",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "phase_name",
          title: "营种",
          type: "string",
          width: 90,
          align: "left",
        },
        // {
        //   field: "",
        //   title: "操作",
        //   type: "string",
        //   width: 90,
        //   align: "left",
        //   render: (h, { row }) => {
        //     return h(
        //       "a",
        //       {
        //         on: {
        //           click: (e) => {
        //             this.picName = row.name;
        //             let parmaa = {
        //               id: row.id,
        //             };
        //             this.http
        //               .post("/api/Mall_camp_configuration/CheckReport", parmaa)
        //               .then((res) => {
        //                 if (res.status) {
        //                   this.backgroundpic =
        //                     this.http.ipAddress + res.data.url;
        //                   this.model10 = true;
        //                   this.draggableData.nodeList = JSON.parse(
        //                     res.data.rule
        //                   ).map((i) => {
        //                     for (const key in row) {
        //                       if (key == i.fieldkey) {
        //                         return {
        //                           id: i.id,
        //                           name: row[i.fieldkey],
        //                           left: i.positionx,
        //                           top: i.positiony,
        //                           type: i.fieldkey,
        //                         };
        //                       }
        //                     }
        //                   });
        //                 }
        //               });
        //           },
        //         },
        //       },
        //       "查看报告"
        //     );
        //   },
        // },
      ],
      modelDetail9: {},
      tableData9: [],
      draggableData: {
        nodeList: [],
      },
      backgroundpic: "",
      model10: false,
      activeElement: {
        type: undefined,
        nodeId: undefined,
      },
      jsPlumb: null,
      picName: "",
      model11: false,
      modelDetail11: {},
      SRCL: "",
    };
  },
  watch: {
    "formFields1.confirmationtime": {
      handler(n, o) {
        let confirmationtimeday = this.getFormOption("confirmationtimeday");
        if (n == 0) {
          confirmationtimeday.hidden = true;
        } else {
          confirmationtimeday.hidden = false;
        }
      },
    },
    "formFields1.deadlinetime": {
      handler(n, o) {
        let deadlinetimehour = this.getFormOption("deadlinetimehour");
        if (n == 0) {
          deadlinetimehour.hidden = true;
        } else {
          deadlinetimehour.hidden = false;
        }
      },
    },
    "formFields1.supportsignatures": {
      handler(n, o) {
        let supportsignaturesis = this.getFormOption("supportsignaturesis");
        if (n == 0) {
          supportsignaturesis.hidden = true;
        } else {
          supportsignaturesis.hidden = false;
        }
      },
    },
    "formFields6.planting": {
      handler(n, o) {
        let operationPeriod = this.getFormOption6("operationPeriod");
        let parmas = {
          order: "desc",
          page: 1,
          rows: 100,
          sort: "phase_id_fk",
          wheres: `[{"name":"campsite_id_fk","value":"${n}","displayType":"text"}]`,
        };
        this.http.post("/api/V_campphase/getPageData", parmas).then((res) => {
          operationPeriod.data = res.rows.map((i) => {
            return {
              key: i.phase_id_fk,
              value: i.phase_name,
            };
          });
        });
      },
    },
    "formFields6.operationPeriod": {
      handler(n, o) {
        let selcamper = this.getFormOption6("selcamper");
        let parmas = {
          order: "desc",
          page: 1,
          rows: 100,
          sort: "phase_id_fk",
          wheres: `[{"name":"phase_id_fk","value":"${n}","displayType":"text"}]`,
        };
        this.http
          .post("/api/V_campphase_people/getPageData", parmas)
          .then((res) => {
            selcamper.data = res.rows.map((i) => {
              return {
                key: i.camppeoid,
                value: i.name,
              };
            });
          });
      },
    },
  },
  methods: {
    previewImg(src) {
      let id = "vol-preview";
      let $div = document.getElementById(id);
      if (!$div) {
        $div = document.createElement("div");
        $div.setAttribute("id", "vol-preview");
        let $mask = document.createElement("div");
        $mask.style.position = "absolute";
        $mask.style.width = "100%";
        $mask.style.height = "100%";
        $mask.style.background = "black";
        $mask.style.opacity = "0.6";
        $div.appendChild($mask);
        $div.style.position = "fixed";
        $div.style.width = "100%";
        $div.style.height = "100%";
        // $div.style.overflow = "scroll";
        $div.style.top = 0;
        $div.style["z-index"] = 9999999;
        let $img = document.createElement("img");
        $img.setAttribute("class", "vol-preview-img");
        $img.style.position = "absolute";
        $img.style.top = "50%";
        $img.style.left = "50%";
        $img.style["max-width"] = "90%";
        $img.style["max-height"] = "90%";
        $img.style.transform = "translate(-50%,-50%)";
        // $img.src = src;
        $img.setAttribute("src", src);
        $div.appendChild($img);
        $div.addEventListener("click", function () {
          this.style.display = "none";
        });
        document.body.appendChild($div);
        return;
      }
      let $img1 = document.body
        .appendChild($div)
        .querySelector(".vol-preview-img");
      // img.src = src;
      $img1.setAttribute("src", src);
      $div.style.display = "block";
    },
    getFormOption(field) {
      let option;
      this.formRules1.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    getFormOption4(field) {
      let option;
      this.formRules4.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    getFormOption6(field) {
      let option;
      this.formRules6.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    getFormOption8(field) {
      let option;
      this.formRules8.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    openModel1(e) {
      this.model1 = true;
      this.formFields1.campsite_id_fk = e.campsite_id_fk;
      let parmas = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "phase_id_fk",
        wheres: `[{"name":"campsite_id_fk","value":"${e.campsite_id_fk}","displayType":"text"}]`,
      };
      this.http.post("/api/Campsite/getPageData", parmas).then((res) => {
        let detail = res.rows[0];
        this.formFields1.confirmationtime =
          detail.confirmationtime == null ? 0 : detail.confirmationtime;
        this.formFields1.deadlinetime =
          detail.deadlinetime == null ? 0 : detail.deadlinetime;
        this.formFields1.supportsignatures =
          detail.supportsignatures == null ? 0 : detail.supportsignatures;
        this.formFields1.confirmationtimeday =
          detail.confirmationtimeday == null ? 0 : detail.confirmationtimeday;
        this.formFields1.deadlinetimehour =
          detail.deadlinetimehour == null ? 0 : detail.deadlinetimehour;
        this.formFields1.supportsignaturesis =
          detail.supportsignaturesis == null ? 0 : detail.supportsignaturesis;
      });
    },
    submit1() {
      let parmas = {
        ...this.formFields1,
      };
      this.http.post("/api/Campsite/CampUpdate", parmas).then((res) => {
        if (res.status) {
          this.model1 = false;
        }
      });
    },
    openModel2(e) {
      this.model2 = true;
      this.phase_id_fk = e.phase_id_fk;
      this.tableData =
        JSON.parse(e.campgrouping) == null ? [] : JSON.parse(e.campgrouping);
    },
    addTea() {
      let obj = {
        id:
          this.tableData.length != 0
            ? Number(this.tableData[this.tableData.length - 1].id) + 1
            : 1,
        name: "",
        group: [
          {
            id: 1,
            name: "",
          },
        ],
      };
      this.tableData.push(obj);
    },
    delTeam(e) {
      if (this.tableData.length > 1) {
        this.tableData.forEach((i, ii, arr) => {
          if (i.id == e.id) {
            arr.splice(ii, 1);
          }
        });
      } else {
        this.$Message.error("至少保留一个团队");
      }
    },
    addGroup(e) {
      let obj = {
        id: Number(e.group[e.group.length - 1].id) + 1,
        name: "",
      };
      e.group.push(obj);
    },
    delGroup(l, e) {
      if (l.length > 1) {
        l.forEach((i, ii, arr) => {
          if (i.id == e.id) {
            arr.splice(ii, 1);
          }
        });
      } else {
        this.$Message.error("至少保留一个小组");
      }
    },
    submit2() {
      let parmas = {
        phase_id_fk: this.phase_id_fk,
        grouping: this.tableData,
      };
      this.http.post("/api/CampsiteHase/CampHaseUpdate", parmas).then((res) => {
        if (res.status) {
          this.model2 = false;
          this.$store.getters.data().viewPageTest.refresh();
        }
      });
    },
    openModel3(e) {
      this.model3 = true;
      this.teamValue = "";
      this.groupValue = "";
      this.phase_id_fk = e.phase_id_fk;
      this.teamList = [
        {
          id: "-1",
          name: "全部",
          group: [],
        },
        ...JSON.parse(e.campgrouping),
      ];
      this.teamListSel = JSON.parse(e.campgrouping);
      this.groupList = this.teamList[0].group;
      this.activeName = this.teamList[0].id;
      this.getcamppeople();
    },
    getcamppeople() {
      let parmas = {
        order: "desc",
        page: 1,
        rows: 1000,
        sort: "phase_id_fk",
        wheres: `[{\"name\":\"phase_id_fk\",\"value\":\"${this.phase_id_fk}\",\"displayType\":\"text\"}]`,
      };
      this.http
        .post("/api/V_campphase_people/getPageData", parmas)
        .then((res) => {
          this.stuList = res.rows;
          this.teamValue = "";
          this.groupValue = "";
          this.groupIndex = 0;
          this.NewStuList = res.rows;
          this.butIndex = [];
          this.teamList.forEach((j) => {
            this.NewStuList.forEach((i) => {
              if (j.id == i.campTeam) {
                j.group.forEach((k) => {
                  if (k.id == i.campGroup) {
                    i.teamGroup = j.name + k.name;
                  }
                });
              }
            });
          });
        });
    },
    getTeam() {
      this.teamValue = "";
      this.groupValue = "";
      this.groupIndex = 0;
      this.NewStuList = [];
      this.NewStuList2 = [];
      this.stuList.forEach((i) => {
        if (this.activeName == -1) {
          this.NewStuList.push(i);
        } else {
          if (this.activeName == i.campTeam) {
            this.NewStuList2.push(i);
          }
        }
      });
      this.teamList.forEach((i) => {
        if (this.activeName != -1) {
          if (this.activeName == i.id) {
            this.getGroup(i.group[0], 0);
          }
        }
      });
    },
    getGroup(e, ii) {
      this.groupIndex = ii;
      this.NewStuList = [];
      this.NewStuList2.forEach((i) => {
        if (e.id == i.campGroup) {
          this.NewStuList.push(i);
        }
      });
    },
    upTeam() {
      this.groupValue = "";
      this.groupList = this.teamList
        .filter((i) => this.teamValue == i.id)
        .map((o) => o.group)[0];
    },
    steStu(item) {
      let arrIndex = this.butIndex.indexOf(item.id);
      if (arrIndex > -1) {
        this.butIndex.splice(arrIndex, 1);
      } else {
        this.butIndex.push(item.id);
      }
    },
    submit3() {
      let parmas = {
        ids: this.butIndex,
        campTeam: this.teamValue,
        campGroup: this.groupValue,
      };
      this.http
        .post("/api/CampsitePhasePeople/BingTeamGroup", parmas)
        .then((res) => {
          if (res.status) {
            this.$Message.success("分配成功");
            this.model3 = false;
          }
        });
    },
    openModel4(e) {
      this.model4 = true;
      this.phase_id_fk = e.phase_id_fk;
      this.formFields4.battalioncommander = [];
      this.formFields4.deputyBattalionCommander = [];
      let battalioncommander = this.getFormOption4("battalioncommander");
      let deputyBattalionCommander = this.getFormOption4(
        "deputyBattalionCommander"
      );
      let parmas = {
        page: 1,
        rows: 10000,
        sort: "User_Id",
        order: "desc",
        wheres: "[]",
      };
      this.formList = JSON.parse(e.campgrouping);
      this.http.post("/api/Users/GetAllUser", parmas).then((res) => {
        let List = res.rows.map((i) => {
          return {
            value: i.userName,
            key: i.user_Id.toString(),
          };
        });
        this.teamTeacher =
          this.groupTeacher =
          battalioncommander.data =
          deputyBattalionCommander.data =
            List;
        if (e.battalioncommander) {
          this.formFields4.battalioncommander = e.battalioncommander.split(",");
        }
        if (e.deputyBattalionCommander) {
          this.formFields4.deputyBattalionCommander =
            e.deputyBattalionCommander.split(",");
        }
        if (e.teamTeacher && e.teamTeacher != {}) {
          JSON.parse(e.teamTeacher).forEach((j, jj, jjj) => {
            this.formList.forEach((i, ii, iii) => {
              if (ii == jj) {
                i.teamTeacher = j.teamTeacher;
              }
            });
          });
        }
        if (e.groupTeacher && e.groupTeacher != {}) {
          JSON.parse(e.groupTeacher).forEach((j, jj, jjj) => {
            this.formList.forEach((i, ii, iii) => {
              if (ii == jj) {
                j.forEach((l) => {
                  i.group.forEach((k) => {
                    if (l.id == k.id) {
                      k.groupTeacher = l.groupTeacher;
                    }
                  });
                });
              }
            });
          });
        }
      });
    },
    submit4() {
      let teamTeacher = null;
      let groupTeacher = null;
      if (this.formList) {
        teamTeacher = this.formList.map((i) => {
          return {
            id: i.id,
            name: i.name,
            teamTeacher: i.teamTeacher,
          };
        });
        groupTeacher = this.formList.map((i) => {
          return i.group;
        });
      }
      let battalioncommander = this.formFields4.battalioncommander.join();
      let deputyBattalionCommander =
        this.formFields4.deputyBattalionCommander.join();

      let parma = {
        phase_id_fk: this.phase_id_fk,
        battalioncommander: battalioncommander,
        deputyBattalionCommander: deputyBattalionCommander,
        teamTeacher: JSON.stringify(teamTeacher),
        groupTeacher: JSON.stringify(groupTeacher),
      };
      this.http.post("/api/CampsiteHase/CampHaseUpdate", parma).then((res) => {
        if (res.status) {
          this.model4 = false;
          this.$Message.success("分配成功");
          this.$store.getters.data().viewPageTest.refresh();
        } else {
          this.model4 = true;
          this.$Message.error(res.message);
        }
      });
    },
    openModel5(e) {
      this.model5 = true;
      this.V_CampsitePeopleMerge = e;
    },
    search5() {
      let parmas = {
        order: "desc",
        page: 1,
        rows: 30,
        sort: "id",
        wheres: "[]",
        value: this.V_CampsitePeopleMerge.id,
      };
      if (this.serValue == 0) {
        parmas.wheres = `[{"name":"name","value":"${this.V_CampsitePeopleMerge.name}","displayType":"text"}]`;
      } else {
        parmas.wheres = `[{"name":"parentsPhone","value":"${this.V_CampsitePeopleMerge.parentsPhone}","displayType":"text"}]`;
      }

      this.http
        .post("/api/V_CampsitePeopleMerge/getPageData", parmas)
        .then((res) => {
          this.tableData5 = res.rows;
        });
    },
    submit5() {
      let ids = this.$refs.editTable5.$refs.table.selection.map((i) => i.id);
      if (ids.length > 0) {
        let People = [...ids];
        this.http
          .post("/api/V_CampsitePeopleMerge/Merge", People)
          .then((res) => {
            if (res.status) {
              this.model5 = false;
              this.$Message.success("合并成功");
            } else {
              this.model5 = true;
              this.$Message.error(res.message);
            }
          });
      } else {
        this.$Message.error("请选择需要合并的数据");
      }
    },
    openModel6(e) {
      this.model6 = true;
      this.modelDetail6 = e;
      let planting = this.getFormOption6("planting");
      this.http
        .post("/api/Dictionary/GetVueDictionary", ["campsite"])
        .then((res) => {
          if (res[0].dicNo == "campsite") {
            planting.data = res[0].data;
          }
        });
    },
    submit6() {
      let parmas = {
        ids: this.formFields6.selcamper,
        medalid: this.modelDetail6.id,
      };
      this.http
        .post("/api/CampsitePeople/BingCampPeople", parmas)
        .then((res) => {
          if (res.status) {
            this.model6 = false;
            this.$Message.success("发放成功");
          } else {
            this.model6 = true;
            this.$Message.error(res.message);
          }
        });
    },
    openModel7(e) {
      this.model7 = true;
      this.modelDetail7 = e;
      let parmas = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "phase_id_fk",
        wheres: `[{"name":"medalId","value":"${this.modelDetail7.id}","displayType":"like"}]`,
      };
      this.http
        .post("/api/V_campphase_people/getPageData", parmas)
        .then((res) => {
          this.tableData7 = res.rows;
        });
    },
    openModel8(e) {
      this.model8 = true;
      this.modelDetail8 = e;
      let yylabel = this.getFormOption8("yylabel");
      this.http
        .post("/api/Dictionary/GetVueDictionary", ["CampLabelType"])
        .then((res) => {
          if (res[0].dicNo == "CampLabelType") {
            yylabel.data = res[0].data;
          }
        });
    },
    submit8() {
      if (this.formFields8.yylabel.length > 0) {
        let parmas = {
          id: this.modelDetail8.id,
          data: this.formFields8.yylabel.join() + ",",
        };
        this.http
          .post("/api/CampsitePeople/SaveCampsPeopleLabels", parmas)
          .then((res) => {
            if (res.status) {
              this.model8 = false;
              this.$Message.success("保存成功");
              this.$store.getters.data().viewPageTest.refresh();
            } else {
              this.model8 = true;
              this.$Message.error(res.message);
            }
          });
      } else {
        this.$Message.error("请选择数据");
      }
    },
    openModel9(e) {
      this.model9 = true;
      this.modelDetail9 = e;
      let parmas = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "phase_id_fk",
        wheres: `[{"name":"phase_id_fk","value":"${this.modelDetail9.phase_id_fk}","displayType":"="}]`,
      };
      this.http
        .post("/api/V_campphase_people/getPageData", parmas)
        .then((res) => {
          this.tableData9 = res.rows;
        });
    },
    submit10(id, pdfName) {
      let ele = document.querySelector(id);
      window.scrollTo(0, 0);
      let eleW = ele.offsetWidth; // 获得该容器的宽
      let eleH = ele.offsetHeight; // 获得该容器的高
      var canvas = document.createElement("canvas"); // 获得当前窗口的宽度（包含滚动条）
      canvas.width = eleW * 2; // 将画布宽&&高放大两倍
      canvas.height = eleH * 2;
      var context = canvas.getContext("2d");
      context.scale(2, 2);
      html2canvas(ele, {
        dpi: 300,
        scale: 1,
        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
      }).then((canvas) => {
        var oA = document.createElement("a");
        oA.download = pdfName + ".jpg"; // 设置下载的文件名，默认是'下载'
        oA.href = canvas.toDataURL("image/jpeg");
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
      });
    },
    openModel11(e) {
      this.model11 = true;
      this.modelDetail11 = e;
      this.modelDetail11.actionimgl =
        e.actionimg != "" ? e.actionimg.split(',') : [];
      this.SRCL = this.http.ipAddress;
    },
  },
};
</script>
<style scoped lang="less">
.actionimg {
  margin-top: 20px;
  width: 30%;
  height: 150px;
  float: left;
  margin-right: 2%;
  img {
    width: 100%;
    height: 100%;
  }
}
.container {
  width: 500px;
  height: 500px;
  background-size: 100% 100%;
  .flowNode {
    position: absolute;
    display: flex;
    width: 100px;
    height: 32px;
    background-color: transparent;
    color: #000;
  }
}
/deep/ .el-table {
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
  .group {
    margin-bottom: 10px;
  }
}
.mabot {
  margin-bottom: 10px;
}
.action {
  background-color: #44af69;
  color: #fff;
}
.el-tab-pane {
  .ivu-btn {
    margin-right: 10px;
  }
}
.groupDiv {
  display: flex;
  flex-wrap: wrap;
  .group-item {
    min-width: 80px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid #cccccc;
    margin: 10px 0;
    margin-right: 10px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    font-size: 12px;
    padding: 0 5px;
  }
}

.student-item {
  min-width: 80px;
  min-height: 60px;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  float: left;
  margin: 10px;
  text-align: center;
  line-height: 20px;
  padding-top: 10px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  .group-tip {
    position: relative;
    background-color: #44af69;
    width: 100%;
    color: #fff;
    line-height: 20px;
    font-size: 12px;
    margin-top: 10px;
    border-radius: 0px 0px 4px 4px;
  }
}
.formList {
  display: flex;
  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 12px;
    // color: #515a6e;
    line-height: 1;
    padding: 10px 12px 10px 0;
    box-sizing: border-box;
    color: #939394;
  }
  .labelTitle {
    float: left;
    font-size: 12px;
    color: #515a6e;
    width: 116px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .formList_item {
    width: 50%;
  }
}
.VolTable {
  margin-top: 10px;
}
</style>
